<template>
  <div align="center">
    <h2>通用合同修改</h2><br>
    <table>
      <tr>
        <td>
          <el-form-item label="合同标题：" style="font-size: 20px;float: right;">
            <el-input v-model="form.contracTitle" style="width: 300px;height: 40px;"
            placeholder="请输入合同标题" clearable />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="对方单位："style="font-size: 20px;float: right;">
            <el-input v-model="form.opponentUnit" style="width: 300px;height: 40px;"
            placeholder="请输入对方单位" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="对方负责人："style="font-size: 20px;float: right;">
            <el-input v-model="form.opponentName" style="width: 300px;height: 40px;"
            placeholder="请输入对方负责人" clearable />
          </el-form-item>
        </td>
        <td>
          <el-form-item label="合同类型："style="font-size: 20px;float: right;">
            <el-input v-model="form.opponenType" style="width: 300px;height: 40px;"
            placeholder="请输入合同类别" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="签订时间："style="font-size: 20px;float: right;">
            <el-date-picker v-model="form.signedTime" type="date" value-format="YYYY-MM-DD"
              placeholder="请选择签订时间" clearable  style="width: 300px;height: 40px;"/>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="经办人："style="font-size: 20px;float: right;">
            <el-input v-model="form.handlingName" style="width: 300px;height: 40px;"
            placeholder="请输入经办人" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="合同金额："style="font-size: 20px;float: right;">
            <el-input v-model="form.contractAmount" style="width: 300px;height: 40px;"
            placeholder="请输入合同金额" clearable />
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-form-item label="合同标的或项目说明" 
            style="font-size: 20px;width: 970px;height: 100px;float: right;" >
          <el-input v-model="form.projectExplain" type="textarea" style="font-size: 20px;width: 970px;height: 100px;"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-form-item label="合同主要条款/边更条款" 
            style="font-size: 20px;width: 970px;height: 100px;float: right;">
          <el-input v-model="form.projectArticle" type="textarea" style="font-size: 20px;width: 970px;height: 100px;"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr >
        <td style="font-size: 20px;">合同文本(附件)：</td>
        <td>
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            :on-success="hhh"
            action="http://47.96.140.177:8000/ContractRead/api/ReadContract/UpdateFile"
            :on-change="handleChange" >
          <el-button type="primary" style="width: 150px;height: 50px;">选取文件</el-button>
            <template #tip>
              <span>（单个附件最大支持20M，支持：PDF、Word、Excel、Txt格式）</span>
            </template>
          </el-upload> 
        </td>
      </tr>
  </table><br><br>
      <tr align="center">
        <el-button type="primary" @click="onSubmit" 
          style="width: 250px;height: 50px;">修改通用合同</el-button>
      </tr>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue'
const route=useRoute()
const form = reactive({
  contractNumber:'TY202010080122',
  contractId:route.query.contractId,
  contracTitle:'',
  opponentName:'',
  opponentUnit:'',
  opponenType:'',
  signedTime:'',
  handlingName:'',
  contractAmount:'',
  projectExplain:'',
  projectArticle:'',
  contractFile:' ',
  contractStatus:'',
  classify:1,
  createName:'',
  createDate:''
})
onMounted(()=>{
  GetContracted()
})
//通用合同查看详情
const GetContracted=()=>{
  axios.get('ContractRead/api/ReadContract/GetContracted', {
    params: {
      contractId:form.contractId
    }
  }).then((ret) => {
    console.log(ret.data.data)
    form.contracTitle=ret.data.data.contracTitle
    form.opponentUnit=ret.data.data.opponentUnit
    form.opponentName=ret.data.data.opponentName
    form.opponenType=ret.data.data.opponenType
    form.signedTime=ret.data.data.signedTime
    form.handlingName=ret.data.data.handlingName
    form.contractAmount=ret.data.data.contractAmount
    form.projectExplain=ret.data.data.projectExplain
    form.projectArticle=ret.data.data.projectArticle
    localStorage.setItem('contractFile',ret.data.data.contractFile)
    kk()
    form.contractStatus=ret.data.data.contractStatus
    form.createName=ret.data.data.createName
    form.createDate=ret.data.data.createDate
  })
}
const fileList=ref()
const kk=()=>{
  const file = ref([
  {
    name: localStorage.getItem('contractFile'),
    url: 'http://47.96.140.177:8000/ContractRead/Imge/'+localStorage.getItem('contractFile'),
  }
  ])
  fileList.value=file.value
}
const hhh=(any:any)=>{
  console.log(any)
  form.contractFile=any
}
//上传文件
const handleChange = () => {
  console.log(fileList.value);
}
import { ElMessage } from 'element-plus'
import router from '@/router';
import { useRoute } from 'vue-router';
//修改通用合同
const onSubmit = () => {
  axios.post(`Contract/api/Contract/UpdateContracted`,form).then((ret) => {
    console.log(ret.data)
    if(ret.data.data==1){
      ElMessage.success('通用修改成功')
      router.push('/OpponentList')
      return
    }else{
      ElMessage.error(ret.data.message)
    }
  })
}
</script>

<style scoped>

</style>